var React = require('react');
var _ = require('underscore');

/**
 * @usage : 纯jquery组件,不参与state ：
 * @remark : 仅用于表单操作，映射字段为 [ category1,category2,category3]
 *           扩展方式 ： 增加select
 * */
var SelectSet = React.createClass({
  propTypes:{
    api : React.PropTypes.string.isRequired,
    width : React.PropTypes.number
  },
  getAjaxList:function( id , level , dom ){
    var { api } = this.props ;
    return $.ajax({
      url : ( api ) + "?id=" + id + "&level=" + level
    }).success(function( data ){
      this.fillList( data.children , dom )
    }.bind(this))
  },
  /***
   * @usage : 渲染新的列表
   * @param dom : 下一集的DOM
   * @param id  : 如果有I，就渲染新的列表；如果没有，就置空
   */
  resetSelect:function( dom , id, level ){
    $( this.refs[dom] ).html( "<option value=''>请选择类别</option>" );
    if( id !== undefined ){
      this.getAjaxList( id,level,dom );
    }
  },
  resetList:function( event , level,arr ){
    var id = event.target.value ;
    _.map( arr ,function(item,index){
      /***
       * @usage : 保持后面的清单同步
       * @remark : 如果index == 0 ，当选项变换时，下一级的选项同步变换，但是下下级只是置空
       *           如果id !== ""  , 当前级选择为空时，后面全部清空
       */
      if( index == 0 && id !== "" ){
        this.resetSelect(item , id, level )
      }else{
        this.resetSelect(item )
      }
    }.bind(this))
  },
  fillList:function( list ,dom ){
    if( list.length == 0 ){
      return  $( this.refs[dom] ).html( "<option value=''>请选择类别</option>" );
    }
    $( this.refs[dom] ).html( _.map(list ,function(item,index){
      var _html = "<option value=" + item.id + ">" + item.name + "</option>" ;
      if( index == 0 ){
        _html = "<option value=''>请选择类别</option>" + _html
      }
      return _html
    }.bind(this)) )
  },
  componentDidMount:function(){
    this.getAjaxList( 0,0,"c1")
  },
  render:function(){
    var style = { width : this.props.width || 64 ,marginRight:"2px"} ;
    var empty = <option value=''>请选择类别</option>;
    return (<span>
            <select onChange={ function( event ){ this.resetList( event , 1,[ 'c2' ,'c3' ]) }.bind(this) }
                    name="category1" ref="c1" style={ style }>
              {empty }
            </select>
            <select onChange={ function( event ){ this.resetList( event , 2,[ 'c3' ])}.bind(this) } name="category2" ref="c2" style={ style }>
              {empty}
            </select>
            <select name="category3" ref="c3" style={ style }>
              {empty}
            </select>
          </span>)
  }
});

module.exports = SelectSet ;